<template>
    <div class="home">
        <el-container>
            <!-- 页头 -->
            <el-header>
                <x-header :toggle="toggle" :collapseHandler="collapseHandler"></x-header>
            </el-header>
            <el-container>
                <!-- 侧边栏 -->
                <el-aside width="auto">
                    <x-aside :toggle="toggle"></x-aside>
                </el-aside>
                <!-- 主内容区域 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
            <!-- 页脚 -->
            <el-footer>
                <x-footer></x-footer>
            </el-footer>
        </el-container>
    </div>
</template>
  
<script setup>
import XFooter from "@/components/x-footer.vue";
import XHeader from "@/components/x-header.vue";
import XAside from "@/components/x-aside.vue";

import { getLogged } from "@/api/user";

const toggle = ref(true);

const collapseHandler = () => {
    toggle.value = !toggle.value;
};

const logged = getLogged()

console.log('是否已登录: ', logged);

const router = useRouter()
const route = useRoute()

if (route.fullPath === '/home') router.push('/home/index')

</script>
  
<style scoped>
* {
    padding: 0 !important;
    margin: 0 !important;
}

.home>.el-container {
    height: 100vh;
}
</style>